<!DOCTYPE html>
<html>
<head>

<script src="../lib/zeu.js"></script>
<style>
html,
body {
  font-family: Consolas, monaco, monospace;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.panel {
  padding: 10px;
}

h3 {
  margin: 5px 0px;
}

</style>
</head>
<body>
  <div class="panel">
    <h3>Digital Clock</h3>
    <div id="digital-clock-1" style="width: 380px; height: 50px;"></div>
  </div>

  <div class="panel">
    <h3>Fan</h3>
    <div id="round-fan-1" style="width: 100px; height: 100px;"></div>
    <button id="toggle-fan">ON/OFF</button>
  </div>

  <div class="panel">
    <h3>Volume Meter</h3>
    <div id="volume-meter-1" style="width: 100px; height: 200px;"></div>
  </div>

  <div class="panel">
    <h3>Heatbeat</h3>
    <div id="heatbeat" style="width: 200px; height: 100px;"></div>
  </div>

  <div id="blink-text" class="panel" style="font: green;">
    blink text
  </div>

  <div class="panel">
    <div id="scroll-panel" style="overflow: hidden; height: 300px; width: 400px; border: 1px solid #999;"></div>
  </div>

  <div class="panel">
    <div id="scroll-panel-2" style="overflow: hidden; height: 300px; width: 400px; border: 1px solid #999;"></div>
  </div>


<script type= text/javascript>
document.addEventListener("DOMContentLoaded", function(event) { 
  
  var digitalClock1 = new zeu.DigitalClcok(
    document.getElementById('digital-clock-1'), 
    {
      dashColor: '#DCDCDC',
      barWidth: 8,
      barHeight : 30,
      space: 8
    }
  );
  digitalClock1.tick();

  
  var roundFan1 = new zeu.RoundFan(document.getElementById('round-fan-1'));
  roundFan1.speed = 5;
  roundFan1.on();
  
  document.getElementById("toggle-fan").addEventListener ("click", function() {
    if (roundFan1.isAnimationOn) {
      roundFan1.off();
    } else {
      roundFan1.on();
    }
  }, false);

  setInterval(function() {
    roundFan1.speed = getRandomInt(1, 5);
    roundFan1.fanColor = getRandomColor();
    roundFan1.centerColor = getRandomColor();
  }, 2000);

  var volumeMeter1 = new zeu.VolumeMeter(document.getElementById('volume-meter-1'));
  volumeMeter1.startAnimation();
  setInterval(function() {
    volumeMeter1.value = getRandomInt(0, 100);
  }, 1000);
  

  var blinkDialog = new zeu.BlinkDialog();
  blinkDialog.blink('BLINK DIALOG!');
  blinkDialog.unblink();

  
  var binkText = new zeu.BlinkText(document.getElementById('blink-text'));
  binkText.blinkCss = 'color: white; background-color: green;';
  binkText.blink();
  
  // binkText.blinkCss = 'color: white; background-color: red;';
  // binkText.unblink();

  /*
  var scrollPanel = new zeu.ScrollPanel(document.getElementById('scroll-panel'));
  setInterval(function() {
    var message = document.createElement('div');
    message.innerHTML = 'time_' + Date.now();
    message.style.cssText = 'margin: 3px; padding: 3px; color: white; background-color: ' + getRandomColor() + ';';
    scrollPanel.push(message);
  }, 200);

  var scrollPanel2 = new zeu.ScrollPanel(document.getElementById('scroll-panel-2'));
  scrollPanel2.isUp = false;
  setInterval(function() {
    var color = 'margin: 3px; padding: 3px; color: white; background-color: ' + getRandomColor() + ';';
    scrollPanel2.pushText('time_' + Date.now(), color);
  }, 200);
  */
  


  


});

</script>
</body>
</html>
